<template>
  <div id="headerH1">
    <ul>
      <p></p>
      <span>{{ title }}</span>
      <li v-if="hasBtn == true">
        <i>
          {{ option }}
          <em>></em>
        </i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    option: String,
    hasBtn: Boolean,
  },
};
</script>

<style lang="less">
#headerH1 {
  width: 100%;
  height: 21px;

  ul {
    width: 100%;
    height: 100%;
    display: flex;
    margin-bottom: 27px;

    p {
      width: 4px;
      height: 100%;
      background: linear-gradient(180deg, #53c2f7, #0092ee);
    }
    span {
      display: block;
      width: 73px;
      height: 17px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #040404;
      line-height: 20px;
      margin-left: 15px;
    }
    > li {
      width: 54px;
      height: 100%;

      text-align: center;
      border: 1px solid #bfbfbf;
      border-radius: 10px;
      margin-left: 189px;
      color: #040404;
      font-size: 12px;
      i {
        line-height: 21px;
        em {
          width: 5px;
          height: 12px;
        }
      }
    }
  }
}
</style>
